<template>
	
		<el-form ref="form" :model="form" label-width="100px">
			<el-form-item label="通知标题" prop="title" style="height: 80px;">
				<el-input v-model="form.title"></el-input>
				
			</el-form-item>
			<el-form-item label="通知内容" prop="contents" style="height: 250px;">
				<quill-editor class="editor" v-model="form.contents" :options="editorOption" style="200px"></quill-editor>
			</el-form-item>
			<el-form-item label="课程" prop="courseName"><el-input :disabled="true" v-model="form.courseName"></el-input> </el-form-item>
			<el-form-item>
			  <el-button type="primary" plain @click="save">保存数据</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import axios from '@/utils/axiosutils.js';
	import {
		quillEditor
	} from 'vue-quill-editor';
	import Quill from 'quill'; //引入编辑器
	export default {
		name: '',
		props: ['noticeCourse'],
		data() {
			return {
				form: {
					title: '',
					contents: "",
					courseName: ""
				},
				editorOption: {
					modules: {
						toolbar: [
							['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
							['blockquote', 'code-block'], // 引用  代码块
							[{
								indent: '-1'
							}, {
								indent: '+1'
							}], // 缩进
							[{
								size: ['small', false, 'large', 'huge']
							}], // 字体大小
							[{
								color: []
							}, {
								background: []
							}], // 字体颜色、字体背景颜色
							[{
								align: []
							}], // 对齐方式
							['clean'] // 清除文本格式
						] //工具菜单栏配置
					},
					placeholder: '',
				}
			}
		},
		components: {
			quillEditor
		},
		created() {
			this.form.courseName = this.noticeCourse;
		},
		methods: {
			save(){
				axios.post(
					'/notify/save',
					resp => {
						this.$emit('update:show', false);
						this.$message.success("通知成功")
						this.$emit('getData');
					},
					this.form
				);
			}
		}
	};
</script>
<style scoped lang="less">
	.quill-editor {
	  height: 180px;
	
	}
	
	.limit {
	  height: 30px;
	  border: 1px solid #ccc;
	  line-height: 30px;
	  text-align: right;
	
	  span {
	    color: #ee2a7b;
	  }
	}
	
	.ql-snow .ql-editor img {
	  max-width: 480px;
	}
	
	.ql-editor .ql-video {
	  max-width: 480px;
	}
</style>
